<template>
    <view>
        <helang-waterfall-list v-if="waterfall.list.length>0" :status="waterfall.status" :list="waterfall.list" :reset="waterfall.reset" @click="goInfo" @handleCardiac="handleCardiac" @done="onDone">
            <template>
                <view v-if="waterfall.status == 'await'">
                    <view class="load-txt">上拉加载更多</view>
                </view>
                <view v-else-if="waterfall.status == 'loading'">
                    <view class="load-txt">加载中</view>
                </view>
                <view v-else-if="waterfall.status == 'success'">
                    <view class="load-txt">加载成功</view>
                </view>
                <view v-else-if="waterfall.status == 'finish'">
                    <view class="load-txt">没有更多了</view>
                </view>
                <view v-else-if="waterfall.status == 'fail'">
                    <image class="load-icon" src="/static/img/fail.png"></image>
                    <view class="load-txt">出错了，请刷新重试</view>
                </view>
                <view v-else-if="waterfall.status == 'empty'">
                    <image class="load-icon" src="/static/img/empty.png"></image>
                    <view class="load-txt">暂无数据</view>
                </view>
                <view v-else><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG --></view>
            </template>
        </helang-waterfall-list>
        <view v-else style="margin-top: 100rpx;">
            <s-empty ></s-empty>
        </view>
    </view>
</template>
<script>import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list.vue";
import {goodsLikeApi, goodsMyLikeApi} from "@/sheep/api";

export default {
    name: "cardiacList",
    components: {
        "helang-waterfall-list": helangWaterfallList,
    },
    data() {
        return {
            waterfall: {
                status: "await",
                list: [],
                reset: false,
            },
            goodsQuery: {
                pageNum: 1,
                pageSize: 10,
                load: true,
            },
        }
    },
    onLoad() {
        this.getGoodsList();
    },
    // 触底触发
    onReachBottom() {
        this.getGoodsList();
    },
    // 下拉刷新
    onPullDownRefresh() {
        // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
        // setTimeout(() => {
        //   this.goodsQuery.pageNum = 1;
        //   this.goodsQuery.load = true;
        //   this.getGoodsList();
        // }, 200);
        this.goodsQuery.pageNum = 1;
        this.goodsQuery.load = true;
        this.getGoodsList();
    },
    methods: {
        // 获取数据
        getGoodsList() {
            if (!this.goodsQuery.load) {
                return;
            }
            this.goodsQuery.load = false;
            // 设置状态为加载中
            this.waterfall.status = "loading";
            goodsMyLikeApi(this.goodsQuery).then((res) => {
                // 第一页数据执行以下代码
                if (this.goodsQuery.pageNum == 1) {
                    // 关闭下拉
                    uni.stopPullDownRefresh();
                    // 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
                    this.waterfall.reset = true;
                    if (res.rows?.length == 0) {
                        this.waterfall.status = "empty";
                        return;
                    }
                }
                // 数据无效时处理
                if (!res.rows || res.rows.length < 1) {
                    // 设置组件为 加载结束 状态
                    this.waterfall.status = "finish";
                    return;
                }
                // 将数据赋值给瀑布流 list 属性
                this.waterfall.list = res.rows;
                // 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
                this.waterfall.status = "success";
            });
        },
        // 瀑布流组件渲染完成
        onDone() {
            // 设置组件为 非重置，这行代码保留不删即可
            this.waterfall.reset = false;
            // 恢复 getGoodsList 方法的调用
            this.goodsQuery.load = true;
            // 设置组件状态为 等待加载
            this.waterfall.status = "await";
            if ((this.waterfall.status = "success")) {
                this.goodsQuery.pageNum++;
            }
            if (this.waterfall.list.length < this.goodsQuery.pageSize) {
                this.waterfall.status = "finish";
            }
        },
        goInfo(data, index, tag) {
            uni.navigateTo({
                url: "/pages/info/index?goodsId=" + data.goodsId,
            });
        },
        async handleCardiac(goodsId){
            let res = await goodsLikeApi({goodsId:goodsId})
            uni.showToast({
                title: res.msg,
                icon: "none",
            })
            if (res.code == 200){
                this.goodsQuery.pageNum = 1
                this.getGoodsList()
            }
        },
    }
}
</script>

<style scoped lang="scss">
//瀑布流
.load-txt {
    padding: 0 0 20rpx 0;
    text-align: center;
    color: #999;
    font-size: 24rpx;
}
.load-icon {
    width: 300rpx;
    height: 300rpx;
    margin: 0 auto 20rpx auto;
    display: block;
}
</style>
